import axios from 'axios'
import React, { Component } from 'react'
import loginCss from './css/index.module.css'
export default class Login extends Component {
    state = {
        isLoginPage: true,
        buttonText: "登录",
        email: '',
        password: '',
        passwordAgain:'',
    }
    render() {
        const loginPage = () => {
            this.setState({
                isLoginPage: true,
                buttonText: "登录",

            })
        }
        const registerPage = () => {
            this.setState({
                isLoginPage: false,
                buttonText: "注册"
            })
        }
        const passwordAgainChange=(e)=>{
            this.setState({
                passwordAgain: e.target.value
            })
        }
        const isLoginPageFn = () => {
            if (!this.state.isLoginPage) {

                return <input type="password" placeholder="确认密码" value={this.state.passwordAgain} onChange={passwordAgainChange}/>
            }
        }
        const isEmail = (e) => {
            return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(e)
        }
        const buttonClick = () => {
            if (this.state.isLoginPage) {
                if (!isEmail(this.state.email)) {
                    alert('邮箱不合法')
                } else {
                    axios.get("/zjr/loginz", { params: { email: this.state.email, password: this.state.password } }).then(
                        res => {
                            console.log(res.data);
                            if (res.data[0]) {
                                window.localStorage.setItem("user", window.JSON.stringify(res.data[0]));
                                console.log(this.props);
                                this.props.fn();
                            } else {
                                alert('密码错误')

                            }
                        })
                }
            }else{
                console.log(this.state.password,this.state.passwordAgain);
                if (!isEmail(this.state.email)) {
                    alert('邮箱不合法')
                } else if(!(this.state.password==this.state.passwordAgain)){
                    alert('两次密码不一致')
                }else {
                    axios.get('/zjr/registerz',{params:{email:this.state.email,password:this.state.password}}).then(res=>{
                        alert(res.data.info);
                        if(res.data.success){
                            this.state.isLoginPage=true;
                            buttonClick();
                        }
                    })
                }
            }
        }
        const emailChange = e => {
            this.setState({
                email: e.target.value
            })
        }
        const passwordChange = e => {
            this.setState({
                password: e.target.value
            })
        }
        const out=()=>{
            this.props.fn();
        }
        return (
            <div className={loginCss.mask} >
                <div className={loginCss.box}>
                    <div className={loginCss.title}>
                        <span onClick={loginPage}>登录</span>/
                        <span onClick={registerPage}>注册</span>
                    </div>
                    <div className={loginCss.input}>
                        <input type="text" placeholder="邮箱" value={this.state.email} onChange={emailChange} />
                        <input type="password" placeholder="密码" value={this.state.password} onChange={passwordChange} />
                        {isLoginPageFn()}
                        <div className={loginCss.login}>
                            <span className={loginCss.button} onClick={buttonClick}>{this.state.buttonText}</span>
                            <span onClick={out}>退出</span>
                            
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}
